<template>
<div class="block">
    <ul>
        <li ref="salemoney">
            <h2>{{dataList.salemoney.title}}<i class="el-icon-question"></i></h2>
            <div class="num"><span>￥</span>{{dataList.salemoney.today}}</div>
            <div class="percent"><i></i>{{dataList.salemoney.yesterday==0?dataList.salemoney.today:(dataList.salemoney.rate+"%")}}</div>
        </li>
        <li ref="shopamount">
            <h2>{{dataList.shopamount.title}}<i class="el-icon-question"></i></h2>
            <div class="num">{{dataList.shopamount.today}}</div>
            <div class="percent"><i></i>{{dataList.shopamount.yesterday==0?dataList.shopamount.today:(dataList.shopamount.rate+"%")}}</div>
        </li>
        <li ref="preamount">
            <h2>{{dataList.preamount.title}}<i class="el-icon-question"></i></h2>
            <div class="num">{{dataList.preamount.today}}</div>
            <div class="percent"><i></i>{{dataList.preamount.yesterday==0?dataList.preamount.today:(dataList.preamount.rate+"%")}}</div>
        </li>
    </ul>
</div>
</template>

<script>
import baseView from "@/views/base";
import {utils} from "hi-ui";
import dataViewCfg from "./dataset.js";

export default {
    name: "dataView",
    extends: baseView,
    components: {},
    data() {
        return {
            dataset:null,
            dataViewCfg:dataViewCfg,
            dataList:{
                salemoney:{
                    title:"今日销售额",
                    today:0,
                    yesterday:0,
                    rate:0,
                },
                shopamount:{
                    title:"今日门店订单量",
                    today:0,
                    yesterday:0,
                    rate:0,
                },
                preamount:{
                    title:"今日处方单量",
                    today:0,
                    yesterday:0,
                    rate:0,
                },
            },
        };
    },
    computed: {},
    watch: {},
    methods: {
        rateIcon(type,data){
            let _num=0;
            if(data.yesterday==0){
                _num=data.today;
            }else{
                _num=data.rate;
            }
            if(_num>0){
                this.$refs[type].querySelector(".percent").className="percent up";
                this.$refs[type].querySelector(".percent i").className="el-icon-caret-top";
            }else if(_num<0){
                this.$refs[type].querySelector(".percent").className="percent down";
                this.$refs[type].querySelector(".percent i").className="el-icon-caret-bottom";
            }else if(_num==0){
                this.$refs[type].querySelector(".percent").className="percent";
                this.$refs[type].querySelector(".percent i").className="";
            }
        }
    },
    mounted() {
        //创建主数据集
        this.dataset = this.$dsContainer.createDataSet(this.dataViewCfg);
        this.dataset.load().then((res)=>{
            let _data=res.dataPack.rows;
            for(let item of _data){
                this.dataList[item.FTYPE][item.FTIME]=item.FVALUE-0;
            }
            for(let i in this.dataList){
                if(this.dataList[i].yesterday!=0){
                    this.dataList[i].rate=parseInt((this.dataList[i].today-this.dataList[i].yesterday)/this.dataList[i].yesterday*10000)/100;
                }
                this.rateIcon(i,this.dataList[i]);
            }
        });
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block{
    height:100%;
    *{
        margin:0;
        padding:0;
    }
    ul{
        display: flex;
        align-items: center;
        list-style: none;
        height:100%;
        li{
            padding-left: 40px;
            flex:1;
            $h:36px;
            h2{
                height:$h;
                line-height:$h;
                font-size: 15px;
                font-weight: bold;
                i{
                    font-size: 14px;
                    color: #ccc;
                    margin-left:5px;
                }
            }
            .num{
                height:$h;
                line-height:$h;
                font-size: 28px;
                font-weight: bold;
                span{
                    font-size: 20px;
                }
            }
            .percent{
                height:$h;
                line-height:$h;
                font-size: 14px;
                color:#999;
                display:flex;
                align-items: center;
                i{
                    font-size: 20px;
                }
                &.up{
                    color:#F56C6C;
                }
                &.down{
                    color:#67C23A;
                }
            }
        }
    }
}
</style>
